<template>
  <div>
    <!-- v-for -->
     <div v-for="(item,index) in arr" :key="index">{{ item.name }} - {{ item.age }} -{{ index }}</div>

     <hr />

     <div class="box">
        <div 
          v-for="(item, i) in wxArr" 
          :key="item" 
          :class="index === i ? 'green': ''"
          @click="changeIndex(i)"
          >{{ item }}</div>
    </div>

    <hr />
    <div>
      <span v-for="(value, key, index) in obj" :key="index">{{ key }} - {{ value }} - {{ index }}</span>
    </div>

  </div>
</template>

<script setup>
const arr = [
  { name: '张三', age: 18 },
  { name: '李四', age: 19 },
  { name: '王五', age: 20 }
]

import { ref } from 'vue'
const index = ref(0)
const wxArr = ['微信', "通讯录", "发现", "我"]
const changeIndex = (i) => {
  index.value = i
}

const obj = {
  name: "西贝",
  title: '西贝莜面村',
}

</script>

<style  scoped>
.box {
    width: 200px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.green {
    color: green;
}
</style>